<template>
  <view class="container">
    <view class="header">
      <view class="back-button" @click="navigateBack">
        <text class="back-icon">←</text>
      </view>
      <view class="page-title">回收塑料瓶</view>
    </view>

    <view class="content">
      <view class="recycle-card">
        <view class="card-header">
          <view class="recycle-icon">
            <image src="/static/icons/plastic-bottle.svg" mode="aspectFit"></image>
          </view>
          <view class="recycle-title">塑料瓶回收</view>
        </view>

        <view class="card-content">
          <view class="instruction">请将塑料瓶放入回收箱</view>
          <button class="start-button" @click="startRecycle">开始回收 (+6 碳环保值)</button>
        </view>
      </view>

      <view class="guidelines">
        <view class="guidelines-title">回收须知</view>
        <view class="guidelines-list">
          <view class="guideline-item">
            <view class="guideline-number">1</view>
            <view class="guideline-text">撕掉标签</view>
          </view>
          <view class="guideline-item">
            <view class="guideline-number">2</view>
            <view class="guideline-text">压缩体积</view>
          </view>
          <view class="guideline-item">
            <view class="guideline-number">3</view>
            <view class="guideline-text">盖子分离</view>
          </view>
        </view>
      </view>

      <view class="points-info">
        <text class="info-icon">✨</text>
        <text class="info-text">每次正确回收可获得6点碳环保值，减少碳排放0.08kg</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      recycleType: ''
    }
  },
  onLoad(options) {
    // 接收从上一个页面传递的回收类型参数
    if (options && options.type) {
      this.recycleType = options.type;
    }
  },
  methods: {
    navigateBack() {
      // 获取页面栈
      const pages = getCurrentPages();
      if (pages.length > 1) {
        // 如果可以返回，则返回上一页
        uni.navigateBack();
      } else {
        // 如果不能返回（已经是第一个页面），则跳转到首页
        // 首页是tabBar页面，需要使用switchTab
        uni.switchTab({
          url: '/pages/index/index'
        });
      }
    },
    startRecycle() {
      // 模拟回收成功
      uni.showToast({
        title: '回收成功！',
        icon: 'success'
      });
      
      // 更新回收数据
      this.updateRecycleData();
      
      // 延迟返回首页
      setTimeout(() => {
        // 获取页面栈
        const pages = getCurrentPages();
        if (pages.length > 1) {
          // 获取上一个页面（首页）的实例
          const previousPage = pages[pages.length - 2];
          // 直接调用首页的方法刷新数据
          if (previousPage && previousPage.loadDataFromStorage) {
            previousPage.loadDataFromStorage();
          }
          // 返回上一页
          uni.navigateBack();
        } else {
          // 如果不能返回（已经是第一个页面），则跳转到首页
          // 首页是tabBar页面，需要使用switchTab
          uni.switchTab({
            url: '/pages/index/index'
          });
        }
      }, 1500);
    },
    
    // 更新回收数据
    updateRecycleData() {
      // 获取当前存储的数据
      let carbonValue = parseInt(uni.getStorageSync('carbonValue') || '245');
      let todayRecycle = parseInt(uni.getStorageSync('todayRecycle') || '3');
      let carbonReduction = parseFloat(uni.getStorageSync('carbonReduction') || '0.15');
      let todayGain = parseInt(uni.getStorageSync('todayGain') || '45');
      
      // 塑料瓶回收：+6 碳环保值，减少碳排放0.08kg
      const points = 6;
      const reduction = 0.08;
      
      // 更新数据
      carbonValue += points;
      todayRecycle += 1;
      carbonReduction += reduction;
      todayGain += points;
      
      // 保存数据到本地存储
      uni.setStorageSync('carbonValue', carbonValue);
      uni.setStorageSync('todayRecycle', todayRecycle);
      uni.setStorageSync('carbonReduction', carbonReduction);
      uni.setStorageSync('todayGain', todayGain);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  background-color: #ffffff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.back-button {
  margin-right: 40rpx;
}

.back-icon {
  font-size: 36rpx;
  color: #333333;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.content {
  padding: 40rpx 30rpx;
}

.recycle-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  text-align: center;
}

.card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}

.recycle-icon {
  width: 120rpx;
  height: 120rpx;
  background-color: #e8eaf6;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20rpx;
}

.recycle-icon image {
  width: 70rpx;
  height: 70rpx;
}

.recycle-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.card-content {
  margin-top: 20rpx;
}

.instruction {
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 30rpx;
}

.start-button {
  width: 100%;
  padding: 25rpx;
  background-color: #4CAF50;
  color: #ffffff;
  border-radius: 12rpx;
  font-size: 30rpx;
  font-weight: bold;
  border: none;
}

.guidelines {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.guidelines-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 30rpx;
}

.guidelines-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.guideline-item {
  display: flex;
  align-items: center;
  padding: 15rpx 0;
}

.guideline-number {
  width: 40rpx;
  height: 40rpx;
  background-color: #3f51b5;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.guideline-text {
  font-size: 28rpx;
  color: #333333;
}

.points-info {
  background-color: #f3e5f5;
  border-radius: 12rpx;
  padding: 20rpx;
  display: flex;
  align-items: flex-start;
  gap: 10rpx;
}

.info-icon {
  font-size: 24rpx;
  margin-top: 2rpx;
}

.info-text {
  font-size: 24rpx;
  color: #7b1fa2;
  flex: 1;
}
</style>